import React from 'react';
import { Select, Spin } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import { getPostlist } from '@/services/components/userform';
import styles from './index.less';

const { Option } = Select;

/**
 * 职位下拉选择
 */
const PositionSelect = ({ value, onChange, ...rest }) => {
    const { data, loading } = useRequest(() => getPostlist(), { ...defaultFormatResult });

    const handleChange = changeValue => {
        if (onChange) {
            onChange(changeValue);
        }
    };

    return (
        <Spin spinning={loading} wrapperClassName={styles.selectSpingWrapper}>
            <Select
                showSearch
                allowClear
                placeholder="请选择职位"
                value={value}
                onChange={handleChange}
                optionFilterProp="children"
                style={{ minWidth: '180px' }}
                dropdownStyle={{ maxHeight: 350, overflow: 'auto' }}
                getPopupContainer={triggerNode => triggerNode.parentElement}
                {...rest}
            >
                {data &&
                    data.map(item => {
                        const { positionCode, positionName } = item;
                        return (
                            <Option value={positionCode} key={positionCode}>
                                {positionName}
                            </Option>
                        );
                    })}
            </Select>
        </Spin>
    );
};

export default PositionSelect;
